<template>
  <div :class="$style.modalb">
    <lay-form ref="formRef" :model="formData" :rules="formRules">
      <lay-form-item label="银行卡" label-position="top" prop="card" required>
        <lay-select v-model="formData.card" placeholder="请选择">
          <lay-select-option v-for="(item, index) in cardList" :key="index" :value="item.id" :label="item.hide"></lay-select-option>
        </lay-select>
      </lay-form-item>
      <lay-form-item label="金额" label-position="top" prop="amount" required>
        <lay-input-number v-model="amountStr" :min="100"></lay-input-number>
      </lay-form-item>
      <div :class="$style.tip">最小出金额度：100</div>
      <lay-form-item>
        <lay-button type="primary" @click="submitForm">提交</lay-button>
      </lay-form-item>
    </lay-form>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "ModalB",
  data() {
    return {
      formData: {
        card: '',
        amount: '100',
      },
      formRules: {
        card: [
          { required: true, message: '请选择银行卡', trigger: 'change' },
        ],
        amount: [
          { required: true, message: '请填写金额', trigger: 'blur' },
        ],
      },
      cardList: [
        { id: '1', name: '22652522324554112', hide: '***************4112' },
        { id: '2', name: '22652522324554112', hide: '***************4112' },
        { id: '3', name: '22652522324554112', hide: '***************4112' },
        { id: '4', name: '22652522324554112', hide: '***************4112' },
      ],
    };
  },
  computed: {
    amountStr: {
      get() {
        return this.formData.amount.toString();
      },
      set(newValue) {
        this.formData.amount = newValue.toString();
      }
    }
  },
  methods: {
    submitForm() {
      let that = this;
      that.$refs.formRef.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData.nickName,
          //   avatar: that.formData.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('提交失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
  },
});
</script>
<style module>
.modalb {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
  overflow-y: auto;
}

.tip {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  line-height: 14px;
  color: #C7C7C7;
  margin-bottom: 30px;
}
</style>
<style scoped>
.layui-select {
  width: 100%;
}

.layui-input-number {
  width: 100%;
}

.layui-btn {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>